{% extends 'base.html' %}
{% load staticfiles %}

{# 页面标题 #}
{% block title %}
    我的网站|注册
{% endblock %}

{# 页面选中状态填补-首页 #}
{% block nav_home_active %}
    active
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="containter">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-4">
                {% if not user.is_authenticated %}
                    <div class="panel panel-default">
                  <div class="panel-heading">
                      <h3 class="panel-title">注册</h3>
                  </div>
                  <div class="panel-body">
                    <form action="#" method="POST">
                        {% csrf_token %}
                        {% for field in reg_form %}
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field }}
                            <p>{{ field.errors.as_text }}</p>
                        {% endfor %}
                        <span class="text-danger">{{ login_form.non_field_errors }}</span>
                        <div class="clearfix"></div>
                        <button id="send_code" class="btn btn-primary pull-left">发送验证码</button>
                        <input type="submit" value="注册" class="btn btn-primary pull-right">
                    </form>
                  </div>
                </div>
                {% else %}
                    <span>已注册登录，跳转到首页...</span>
                    <script type="text/javascript">
                        window.location.href = '/';
                    </script>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block script_extends %}
    <script type="text/javascript">
        $('#send_code').click(function (){
           var email = $('#id_email').val();
           if(email==""){
                $("#tip").text('* 邮箱不能为空');
                return false;
           }

           // 发送验证码
           $.ajax({
               url: "{% url 'send_verification_code' %}",
               type: "GET",
               data: {
                   'email': email,
                   'send_for': 'register_code'
               },
               cache: false,
               success: function (data){
                   if(data['status']=='ERROR'){
                       alert(data['status']);
                   }
               }
           });

           // 把按钮变灰色
           $(this).addClass('disabled');
           $(this).attr('disabled', true);
           var time = 15;
           $(this).text(time + 's');
           var interval = setInterval(() => {
               if(time <= 0){
                   clearInterval(interval);
                   $(this).removeClass('disabled');
                   $(this).attr('disabled', false);
                   $(this).text('发送验证码');
                   return false;
               }

               time --;
               $(this).text(time + 's');
           }, 1000);
        });
    </script>
{% endblock %}